<template>
  <page-wrap :show-top="showTop" back hideTab :bg-color="uNavColor">
    <view class="top-container">
      <view class="top-title">岗位详情</view>
    </view>
    <view
      class="content-container"
      :style="{ paddingBottom: isBannerShow ? '300rpx' : '100rpx' }"
    >
      <view class="page-header">
        <view class="header-title">{{ jobInfo.oriPositionName }}</view>
        <view class="header-company">{{
          jobInfo.company.shortName || jobInfo.company.name
        }}</view>
        <view class="header-info">
          <view class="info-site"
            >{{ jobInfo.workPlace }}·{{
              jobInfo.jobType == 1
                ? "全职"
                : jobInfo.jobType == 2
                ? "实习"
                : "兼职"
            }}</view
          >
          <view class="info-date">发布时间：{{ jobInfo.publishTime }}</view>
        </view>
      </view>
      <view class="divider"></view>

      <view class="section-bar">
        <view class="bar-flag"></view>
        <view class="bar-title">职位详情</view>
      </view>
      <view class="section-content">{{
        jobInfo.oriPositionDemand || "未知"
      }}</view>
      <view class="section-bar">
        <view class="bar-flag"></view>
        <view class="bar-title">任职资格</view>
      </view>
      <view class="section-content">{{
        jobInfo.skillsRequired || "未知"
      }}</view>
      <view class="section-bottom">
        <view class="divider"></view>
        <view class="tips-bar">{{ text_bottom_tips }}</view>
      </view>
    </view>
    <view class="page-footer">
      <view class="banner-container" v-if="isBannerShow">
        <u-image
          class="banner-image"
          width="100%"
          height="66px"
          :src="iconBanner"
          @click="handleBannerClick"
        ></u-image>
        <view class="close-container" @click="handleBannerClose">
          <u-image
            class="close-btn"
            width="12px"
            height="12px"
            :src="iconDelete"
          ></u-image>
        </view>
      </view>
      <view class="action-bar">
        <view class="btn-copy" @click="copyLinkAction">复制链接投递</view>
        <view class="btn-item collect" @click="doCollectAction">
          <image
            :style="{ width: '21px', height: '21px' }"
            :src="jobInfo.favoritesStatus == 1 ? iconCollOn : iconColl"
          ></image>
          <view class="item-title">{{
            jobInfo.favoritesStatus == 1 ? "已收藏" : "收藏"
          }}</view>
        </view>
        <button
          class="option-rich share"
          open-type="share"
          @click="handleWeChat"
          v-if="shareList.length"
        >
          <view class="btn-item share">
            <u-image width="21px" height="21px" :src="iconShare"></u-image>
            <view class="item-title">分享</view>
          </view>
        </button>
      </view>
    </view>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import ShareMixin from "@/mixins/share";
import loginOutMixin from "@/mixins/login-out.js";
import loginMixin from "@/mixins/login.js";
import LoginDialog from "@/components/LoginDialog";

import {
  getHomeJobDetail,
  doCollectJob,
  removeCollectJob,
} from "@/api/modules/enterprises";
import { getResumeInfo } from "@/api/index";
export default {
  components: {
    LoginDialog,
  },

  mixins: [ShareMixin, loginOutMixin, loginMixin],
  data() {
    return {
      navHeight: getApp().globalData.navHeight + uni.upx2px(0),
      filterFixed: false,
      text_bottom_tips:
        "岗位信息来源网络，由平台AI整理发布，招聘详细信息请以官网为准，如有问题请及时联系我们，邮箱pm@job1001.com，400-884-1001",
      advImgUrl: this.$imgBaseSelf + "common/search.png",

      iconColl: this.$imgBaseSelf + "enterprises/icon_coll.png",
      iconCollOn: this.$imgBaseSelf + "enterprises/icon_coll_on.png",
      iconShare: this.$imgBaseSelf + "enterprises/icon_share.png",
      iconDelete: this.$imgBaseSelf + "enterprises/icon_banner_delete.png",
      iconBanner: this.$imgBaseSelf + "enterprises/icon_offer_banner.png",

      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      jobId: "",
      jobInfo: {},
      isCollect: false,
      sharePath: "",
      shareTitle: "",
      sharemageUrl: "",
      showShare: false,
      shareList: [
        // #ifdef MP-WEIXIN
        {
          text: "转发至微信好友或群聊",
          fcn: this.handleWeChat,
          type: "share",
        },
        // #endif
        // {
        //   text: "生成职位详情长图",
        //   fcn: this.handleLongImg,
        //   type: "",
        // },
        // {
        //   text: "生成职位名片",
        //   fcn: this.handleCard,
        //   type: "",
        // },
        // #ifdef MP-WEIXIN
        {
          text: "生成职位详情小程序码",
          fcn: this.handleCode,
          type: "",
        },
        // #endif
      ],
      isBannerShow: true,
    };
  },

  created() {
    this.navHeight = getApp().globalData.navHeight;
  },

  onLoad(option) {
    console.log("🚀 ~ file: interviewReady.vue:77 ~ option:", option);
    if (option && option.jobId) {
      this.jobId = option.jobId;
      this.sharePath = `/pagesSub/enterprises/detail/index?jobId=${this.jobId}`;
      this.shareQuery = `jobId=${this.jobId}`;
      this.shareTitle = `【${option.oriPositionName}】招聘详情`;
      this.getJobInfo();
    }
  },

  onShow() {},

  onHide() {},

  methods: {
    handleWeChat() {},
    handleShare(item) {
      this.showShare = false;
      this.$nextTick(item.fcn);
    },

    // 获取列表数据
    getJobInfo() {
      let param = {
        jobId: this.jobId,
        personId: this.personId,
      };
      getHomeJobDetail(param).then((res) => {
        console.log("🚀 ~ getHomeJobDetail ~ res:", res);
        if (res.code == 200) {
          this.jobInfo = res.data;
          console.log("🚀 ~ getJobInfo ~ this.jobInfo:", this.jobInfo);
        } else {
        }
      });
    },

    getResumeComplete() {
      let param = {
        person_id: this.personId,
      };
      getResumeInfo(param).then((res) => {
        console.log("🚀 ~ getResumeInfo ~ res:", res);
        if (res.code == 200) {
          const data = res.data;

          if (data) {
            const obj = data.complete_info;
            if (obj) {
              const baseInfo = obj.baseInfo;
              const target = obj.target;//2 已完善 1 未完善
              const edus = obj.edus;
              if (baseInfo != 2) {
                uni.navigateTo({
                  url:
                    `/pagesSub/newResume/completeResumeSteps/baseInfo?data=` +
                    encodeURIComponent(JSON.stringify(data)),
                });
              } else {
                if (target != 2) {
                  uni.navigateTo({
                    url:
                      `/pagesSub/newResume/completeResumeSteps/target?data=` +
                      encodeURIComponent(JSON.stringify(data)),
                  });
                } else {
                  if (edus != 2) {
                    uni.navigateTo({
                      url:
                        `/pagesSub/newResume/completeResumeSteps/edus?data=` +
                        encodeURIComponent(JSON.stringify(data)),
                    });
                  } else {
                    // 判断是否http开头
                    let httpUrl = this.jobInfo.positionFromSite;
                    console.log("🚀 ~ getResumeInfo ~ url:", httpUrl);
                    uni.setClipboardData({
                      data: httpUrl,
                      success: function (res) {
                        console.log("setClipboardData success",res);
                        uni.showToast({
                          title: "链接已复制成功！可打开链接前往投递",
                          icon: "none",
                          duration: 1000,
                        });
                      },
                    });
                  }
                }
              }
            }
          }
        }
      });
    },

    // 复制链接
    copyLinkAction() {
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      this.getResumeComplete();
    },

    // 收藏/取消收藏
    doCollectAction() {
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      uni.setStorageSync("operateCollect", "1");
      let param = {
        jobId: this.jobId,
        personId: this.personId,
      };
      if (this.jobInfo.favoritesStatus == 1) {
        removeCollectJob(param).then((res) => {
          console.log("🚀 ~ removeCollectJob ~ res:", res);
          let msg = "";
          if (res.code == 200) {
            this.jobInfo.favoritesStatus = 0;
            msg = "已取消收藏";
            uni.showToast({
              title: msg,
              icon: "none",
              duration: 1000,
            });
          }
        });
      } else {
        doCollectJob(param).then((res) => {
          console.log("🚀 ~ getHomeJobDetail ~ res:", res);
          let msg = "";
          if (res.code == 200) {
            this.jobInfo.favoritesStatus = 1;
            msg = "收藏成功";
          } else {
            msg = "收藏失败";
          }
          uni.showToast({
            title: msg,
            icon: "none",
            duration: 1000,
          });
        });
      }
    },

    doShareAction() {
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      console.log("🚀 ~ doShareAction: ---1111");
      this.showShare = true;
    },

    // 显示登录对话框
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    loginSuccessBack() {
      console.log("loginSuccessBack");
      this.personId = uni.getStorageSync("person-id").slice(2) || "";
    },
    handleBannerClose() {
      this.isBannerShow = false;
    },
    handleBannerClick() {
      let url = "https://mp.weixin.qq.com/s/ReE9-gQtunYEu0fZOU1m5A";
      uni.navigateTo({
        url: "/pagesSub/careerGrow/careerSearch/webview?url=" + url,
      });
    },
  },
};
</script>

<style lang="scss">
$img-base-mine: $img-base + "mine/";
$img-base-jdetail: $img-base + "jdetail/";
@include img-base-self(".person-top", "pcenter/bg.png?v=1");

::v-deep .u-close--top-right {
  top: 5rpx !important;
  right: 5rpx !important;
}

.top-container {
  background: url($img-base-mine + "minebg.png");
  background-size: cover;
  position: fixed;
  height: 176rpx;
  width: 100%;
  .top-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: MiSans, MiSans;
    font-weight: 600;
    font-size: 32rpx;
    color: #222222;
    line-height: 32rpx;
    margin-top: 114rpx;
  }
}

.content-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 0 40rpx;
  background: #ffffff;

  .page-header {
    margin-top: 214rpx;
    font-family: MiSans, MiSans;
    .header-title {
      font-weight: 600;
      font-size: 40rpx;
      color: #222222;
      line-height: 50rpx;
    }
    .header-company {
      font-family: MiSans, MiSans;
      font-weight: 400;
      font-size: 24rpx;
      color: #888888;
      line-height: 24rpx;
      margin-top: 30rpx;
    }

    .header-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 14rpx;
      margin-bottom: 34rpx;

      font-weight: 400;
      font-size: 24rpx;
      color: #888888;
      line-height: 24rpx;
    }
  }

  .divider {
    border-bottom: 1rpx solid #f8f8f8;
  }

  .section-bar {
    margin-top: 42rpx;
    margin-bottom: 16rpx;
    display: flex;
    align-items: center;
    .bar-flag {
      width: 6rpx;
      height: 24rpx;
      background: #f04646;
      margin-right: 12rpx;
    }
    .bar-title {
      font-family: MiSans, MiSans;
      font-weight: 600;
      font-size: 32rpx;
      color: #222222;
      line-height: 32rpx;
    }
  }

  .section-content {
    font-family: MiSans, MiSans;
    font-weight: 400;
    font-size: 24rpx;
    color: #333333;
    line-height: 48rpx;
    white-space: pre-line;
  }
  .section-bottom {
    margin-top: 50rpx;
    width: 100%;

    .tips-bar {
      font-family: MiSans, MiSans;
      font-weight: 400;
      font-size: 18rpx;
      color: #aaaaaa;
      line-height: 32rpx;
      text-align: left;
      padding: 34rpx 0;
      margin-bottom: env(safe-area-inset-bottom); /* 考虑安全区域 */
    }
  }
}

.page-footer {
  position: fixed; // 固定定位
  left: 0;
  right: 0;
  bottom: 0; // 固定在视口底部
  background: white;
  z-index: 100; // 确保它在其他内容之上
  // height: 142rpx; // 明确高度
  box-shadow: 0rpx -2rpx 0rpx 0rpx #f6f6f6;
  padding-bottom: env(safe-area-inset-bottom); /* 考虑安全区域 */

  .banner-container {
    position: relative;
    width: 100%;
    .banner-image {
      width: 100%;
      display: block;
    }

    .close-container {
      position: absolute;
      top: 5rpx;
      right: 5rpx;
      width: 40rpx;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }
  }
  .action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1rpx solid #f5f5f5;
    background: white;
    padding: 20rpx 0;
    .btn-copy {
      width: 412rpx;
      height: 80rpx;
      background: #f04646;
      border-radius: 40rpx 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: MiSans, MiSans;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
      margin-left: 34rpx;
      letter-spacing: 1rpx;
    }
    .btn-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 120rpx;

      .item-title {
        font-family: MiSans, MiSans;
        font-weight: 400;
        font-size: 24rpx;
        color: #222222;
        line-height: 24rpx;
        text-align: center;
        margin-top: 12rpx;
      }
      &.share {
        margin-right: 20rpx;
      }
      &.collect {
        margin-left: 60rpx;
      }
    }
    .option-rich {
      &.share {
        background: transparent;
        border: none;
        &::after {
          display: none;
        }
        &.button-hover {
          background: transparent;
          color: $uni-text-color-222;
        }
      }
    }
  }
}
.person-top {
  height: 100rpx;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  border-radius: 0 0 68rpx 68rpx;
}
</style>
